<script setup>

// Servo 类 - 控制一组关节
class Servo {
    constructor(name) {
        this.name = name;
        this.jointPositions = new Map();
        console.log(`初始化 ${this.name} 控制器`);
    }
    
    // 初始化关节位置
    initializeJoint(jointId, initialPosition = 0) {
        this.jointPositions.set(jointId, initialPosition);
        console.log(`${this.name} 关节 ${jointId} 初始位置: ${initialPosition}`);
    }
    
    // 获取关节当前位置
    getJointPosition(jointId) {
        return this.jointPositions.get(jointId) || 0;
    }
    
    // 设置关节位置（内部使用）
    _setJointPosition(jointId, position) {
        this.jointPositions.set(jointId, position);
        console.log(`${this.name} 关节 ${jointId} 当前位置: ${position.toFixed(2)}`);
    }
    
    // 平滑移动单个关节到目标位置
    moveJoint(jointId, targetPosition, duration = 20000) {
        return new Promise((resolve) => {
            const startTime = performance.now();
            const startPosition = this.getJointPosition(jointId);
            const distance = targetPosition - startPosition;
            
            const animate = (currentTime) => {
                const elapsedTime = currentTime - startTime;
                const progress = Math.min(elapsedTime / duration, 1);
                const easeOutCubic = 1 - Math.pow(1 - progress, 3);
                const currentPosition = startPosition + distance * easeOutCubic;
                
                this._setJointPosition(jointId, currentPosition);
                
                if (progress < 1) {
                    requestAnimationFrame(animate);
                } else {
                    console.log(`${this.name} 关节 ${jointId} 已到达目标: ${targetPosition}`);
                    resolve();
                }
            };
            
            requestAnimationFrame(animate);
        });
    }
    
    // 同时移动多个关节
    moveJoints(jointParamsArray) {
        const promises = jointParamsArray.map(({ jointId, targetPosition, duration }) => {
            return this.moveJoint(jointId, targetPosition, duration);
        });
        
        return Promise.all(promises);
    }
}

// 使用示例
async function simulateMultiServoMovement() {
    // 创建多个 Servo 控制器
    const armServo = new Servo("机械臂");
    const gripperServo = new Servo("夹爪");
    
    // 初始化各控制器的关节
    armServo.initializeJoint(1, 0);  // 机械臂关节1
    armServo.initializeJoint(2, 0);  // 机械臂关节2
    gripperServo.initializeJoint(1, 0);  // 夹爪关节1
    
    try {
        console.log("开始多控制器协同运动...");
        
        // 并行执行多个控制器的运动
        await Promise.all([
            // 机械臂运动
            armServo.moveJoints([
                { jointId: 1, targetPosition: 90, duration: 15000 },
                { jointId: 2, targetPosition: 45, duration: 20000 }
            ]),
            
            // 夹爪运动
            gripperServo.moveJoint(1, 30, 10000)
        ]);
        
        console.log("所有控制器的关节运动已完成!");
    } catch (error) {
        console.error("运动过程中出错:", error);
    }
}

// 启动多控制器仿真
simulateMultiServoMovement();    

onMounted(() => {

});

onUnmounted(() => {

});
</script>

<template>
  <div ref="container">
  
  </div>


</template>

<style scoped>
  div {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
  }
</style>
